<template>
  <f-table ref="tableRef" @register="register">
    <template #user="{}">
        <div class="flex items-center">
            <el-avatar :src="user?.avatar"></el-avatar>
            <div class="overflow-hidden ml-[5px] nickname">{{ user?.nickname }}</div>
        </div>
    </template>
  </f-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { t } from '@/lang'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns } from '@/addon/htscrm/data/activity.video.user-data.log'
import { getUserViewLogApi } from '@/addon/htscrm/api'

const searchForm = ref({
    id: 0,
    uid: 0
})
const user = ref<IUserItem>()
const tableRef = ref()
const { methods, register } = useTable({
    rowKey: 'id',
    hideTableHeader: true,
    columns: tableColumns(t) as BasicColumn<IViewLogItem>[],
    beforeFetch: (opt) => {
        return { ...opt, ...searchForm.value }
    },
    api: async (opt) => (await getUserViewLogApi(opt)).data
})

/**
 * @description 初始化
 */
function init (row: IUserItem, id: number) {
    searchForm.value = {
        uid: row.id as number,
        id
    }
    user.value = row
    methods.reload()
}

defineExpose({
    init
})
</script>

<style lang="scss" scoped>
:deep(.f-search) {
    background-color: var(--el-bg-color-page);
}
.el-avatar {
    width: 40px;
    height: 40px;
}
.nickname {
  max-width: 85px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
